<template>
  <el-dialog
    v-if="openForm"
    v-model="openBoole"
    :close-on-click-modal="false"
    custom-class="mydialog"
    width="65%"
    :title="title"
    @close="close"
  >
    <el-form
      ref="openRef"
      :model="openForm"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <el-row gutter="40">
        <el-col :span="12">
          <el-form-item
            label="负责产品与价格"
            prop="terminalType"
          >
            <el-select
              v-model="openForm.terminalType"
              style="width: 100%"
              placeholder="请选择兼职级别"
            >
              <el-option
                label="初级"
                value="1"
              />
              <el-option
                label="中级"
                value="2"
              />
              <el-option
                label="高级"
                value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="产品名称"
            prop="terminalType"
          >
            <el-select
              v-model="openForm.terminalType"
              style="width: 100%"
              placeholder="请选择产品名称"
            >
              <el-option
                label="初级"
                value="1"
              />
              <el-option
                label="中级"
                value="2"
              />
              <el-option
                label="高级"
                value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="批准文号"
            prop="terminalType"
          >
            <el-select
              v-model="openForm.terminalType"
              style="width: 100%"
              placeholder="请选择批准文号"
            >
              <el-option
                label="初级"
                value="1"
              />
              <el-option
                label="中级"
                value="2"
              />
              <el-option
                label="高级"
                value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="包装规格"
            prop="terminalType"
          >
            <el-select
              v-model="openForm.terminalType"
              style="width: 100%"
              placeholder="请选择包装规格"
            >
              <el-option
                label="初级"
                value="1"
              />
              <el-option
                label="中级"
                value="2"
              />
              <el-option
                label="高级"
                value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="交易价"
            prop="terminalName"
          >
            <el-input
              v-model="openForm.terminalName"
              clearable
              placeholder="请输入交易价"
            >
              <template #append>
                <span>元/盒</span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="负责营销职员"
            prop="terminalType"
          >
            <el-select
              v-model="openForm.terminalType"
              style="width: 100%"
              placeholder="请选择包装规格"
            >
              <el-option
                label="初级"
                value="1"
              />
              <el-option
                label="中级"
                value="2"
              />
              <el-option
                label="高级"
                value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button
              class="border-btn"
              size="small"
            >添加终端</el-button>
            <el-button
              class="border-btn"
              size="small"
            >全部移除</el-button>
          </el-form-item>
        </el-col>
        <el-col>
          <el-table
            :data="openForm.tableData"
            header-cell-class-name="table-header"
            size="medium"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="tags"
              label="终端名称"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="address"
              label="所在地区"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="saleArea"
              label="准入模式"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              type="tags"
              label="价格属性"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="tags"
              label="终端价(元)"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="address"
              label="关联招商计划"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="saleArea"
              label="配送商"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              type="tags"
              label="配送量"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="{row}">
                <el-button type="text">编辑</el-button>
                <el-button type="text">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div
        class="dialog-footer"
        style="display:flex;justify-content:center;align-items:center;"
      >
        <el-button
          class="border-btn"
          size="small"
          style="margin-right: 20px;"
          @click="close"
        >取消</el-button>
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="handlSubmit"
        >提交审核</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, inject, reactive, toRefs,} from 'vue'
import {validateVETel} from '@/utils/validate'

export default {
  name: 'FormTerminal',
  setup(props, context) {
    //* ************自定义效验**********
    const validateTel = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else {
        if (validateVETel(value)) {
          callback(new Error('手机号格式不正确'))
        } else {
          callback()
        }
      }
    }
    //* ********************************
    const api = inject('api')
    var data = reactive({
      openBoole: false,
      openForm: {
        terminalName: '', // 终端名称
        provinceCode: '', // 省code
        cityCode: '', // 市code
        areaCode: '', // 区code
        address: '', // 详细地址
        contacts: '', // 联系人
        tel: '', // 联系电话
        tableData: [],
      },
      openRef: null,
      title: '兼职注册终端',
      rules: {
        terminalName: [
          { required: true, message: '请输入终端名称', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
        tel: [{ validator: validateTel, trigger: 'blur' }],
        value: [{ required: true, message: '请选择地区', trigger: 'change' }],
      },
    })
    const currentInstance = getCurrentInstance()

    const close = () => {
      data.openBoole = false
      handlRemove()
    }

    const handlRemove = () => {
      data.openForm.cityCode = ''
      data.openForm.areaCode = ''
      data.openForm.address = ''
      data.openRef.clearValidate()
      data.openRef.resetFields()
    }

    const open = () => {
      data.openBoole = true
    }

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
        }
      })
    }

    return {
      ...toRefs(data),
      close,
      open,
      handlSubmit,
      handlRemove,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
